<template>
    <div class="default-main view-main device-main">
        <Table ref="tableRef"></Table>
        <Dialog></Dialog>
        <SyncChannelProgressDialog ref="progressDialogRef"></SyncChannelProgressDialog>
    </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import { TableApi, TableState } from '@/components/table/table';
import Table from '@/components/table/index.vue';
import { defaultOptButtons, TableRow } from '@/components/table/index';
import Dialog from '@/views/admin/device/dialog.vue';
import SyncChannelProgressDialog from '@/views/admin/device/SyncChannelProgressDialog.vue';
import { useRouter } from 'vue-router';
import { DeviceTableDataState, DeviceTableDialogState } from '@/views/admin/device/interface';
import { ElMessage } from 'element-plus';

defineOptions({
    name: 'AdminDevice',
});

const router = useRouter();
const tableRef = ref();
const progressDialogRef = ref();
const state = new TableState<DeviceTableDataState, DeviceTableDialogState>(
    new TableApi(
        new Map([
            ['page', '/api/web/device/queryByPage'],
            ['add', '/api/web/device/add'],
            ['edit', '/api/web/device/update'],
            ['delete', '/api/web/device/delete'],
            ['sync', '/api/web/device/sync'],
        ])
    ),
    {
        pk: ['device_id'],
        pagination: true,
        columns: [
            {
                type: 'selection',
                align: 'center',
                minWidth: 55,
                fixed: 'left',
            },
            {
                prop: 'device_id',
                label: '设备编号',
                minWidth: 180,
                fixed: 'left',
            },
            {
                prop: 'device_name',
                label: '设备名称',
                minWidth: 160,
                fixed: 'left',
            },
            {
                render: 'tag-state',
                prop: 'host_address',
                label: '地址',
                minWidth: 160,
                getTagStateColor: (row: TableRow) => {
                    if (row) {
                        return '#0c67ef';
                    }
                    return '#0c67ef';
                },
                getTagStateText: (row: TableRow) => {
                    if (row) {
                        return row.host_address;
                    }
                    return '';
                },
            },
            {
                prop: 'manufacturer',
                label: '厂家',
                minWidth: 200,
            },
            {
                prop: 'transport',
                label: '信令传输模式',
                minWidth: 120,
            },
            {
                render: 'select',
                prop: 'stream_mode',
                label: '流传输模式',
                minWidth: 200,
                select_action: 'stream-mode-select-change',
                options: [
                    { label: 'UDP', value: 'UDP' },
                    { label: 'TCP主动模式', value: 'TCP-ACTIVE' },
                    { label: 'TCP被动模式', value: 'TCP-PASSIVE' },
                ],
            },
            {
                prop: 'channel_count',
                label: '通道数',
            },
            {
                render: 'tag-state',
                prop: 'on_line',
                label: '状态',
                getTagStateColor: (row: TableRow) => {
                    if (row.on_line === true) {
                        return '#0c67ef';
                    }
                    return '#909399';
                },
                getTagStateText: (row: TableRow) => {
                    if (row.on_line === true) {
                        return '在线';
                    }
                    return '不在线';
                },
            },
            {
                prop: 'keepalive_time',
                label: '最近心跳',
                width: 220,
            },
            {
                prop: 'register_time',
                label: '最近注册',
                width: 220,
            },
            {
                show: false,
                prop: 'update_time',
                label: '更新时间',
                width: 220,
            },
            {
                show: false,
                prop: 'create_time',
                label: '创建时间',
                width: 220,
            },
            {
                render: 'buttons',
                label: '操作',
                align: 'center',
                width: 440,
                fixed: 'right',
                buttons: [
                    {
                        render: 'tipButton',
                        action_type: 'device-refresh-btn',
                        title: '刷新',
                        text: '刷新',
                        type: '',
                        class: 'table-row-edit',
                        icon: 'table-item-refresh',
                        size: 'default',
                    },
                    {
                        render: 'tipButton',
                        action_type: 'device-channel-btn',
                        title: '通道',
                        text: '通道',
                        type: 'primary',
                        class: 'table-row-edit',
                        icon: 'table-channel',
                        size: 'default',
                    },
                    ...defaultOptButtons(['edit'], 'default'),
                    {
                        render: 'tipButton',
                        action_type: 'device-del-btn',
                        title: '删除',
                        text: '删除',
                        type: 'danger',
                        class: 'table-row-delete',
                        icon: 'table-del',
                        size: 'default',
                    },
                ],
            },
        ],
        condition: {
            page_no: 1,
            page_size: 10,
        },
    },
    new DeviceTableDataState(),
    new DeviceTableDialogState(),
    {
        header: {
            title: '国标设备管理',
            buttons: ['refresh', 'add', 'edit'],
        },
        form: {
            param_name: 'device',
        },
    }
);

state.addAction('stream-mode-select-change', (data: any, table: TableState<DeviceTableDataState, DeviceTableDialogState>) => {
    let old: string = data.row.stream_mode;
    data.row.stream_mode = data.value;
    table.api
        .post('edit', {
            device: data.row,
        })
        .then(() => {
            ElMessage.success('流传输模式修改成功');
        })
        .catch((error) => {
            data.row.stream_mode = old;
            console.error(error);
            ElMessage.error(`code: ${error.code} msg: ${error.msg}`);
        });
});

state.addAction('device-refresh-btn', (data: any, table: TableState<DeviceTableDataState, DeviceTableDialogState>) => {
    table.api
        .post('sync', { device_id: data.row.device_id })
        .then(() => {
            progressDialogRef.value.open(data.row.device_id);
        })
        .catch((error) => {
            console.error(error);
            ElMessage.error(`code: ${error.code} msg: ${error.msg}`);
        });
});

state.addAction('device-channel-btn', (data: any) => {
    router.push({
        name: 'admin-device-channel-list',
        params: {
            device_id: data.row.device_id,
        },
    });
});

state.addAction('device-del-btn', (data: any) => {});

// 初始化列表
state.list();
// 绑定属性
provide('state', state);
</script>

<style scoped lang="scss">
.device-main {
    :deep(.el-table__body) {
        margin-bottom: 10px;
    }
}
</style>
